<template>
  <view class="my-study-container">
	  <!-- 按钮切换栏 -->
	  <view class="button-switch-bar">
		 <view class="switch-btn" :class="{ active: currentTab === 'studyView' }" @click="currentTab = 'studyView';goToStudyView()">自习室查看</view>
		<view class="switch-btn" :class="{ active: currentTab === 'rank' }"  @click="currentTab = 'rank';goToRankPage()">个人排名</view>
	  </view>
    <!-- 搜索栏 -->
    <view class="search-bar">
      <image src="/static/image-room/显示查找列表.png" class="search-icon"></image>
      <input type="text" placeholder="请输入自习室搜索..." class="search-input" v-model="searchKey">
	  <button type="primary" class="search-btn" @click="searchStudyRoom">查询</button>
    </view>
    <!-- 自习室列表（添加滑动容器） -->
    <view class="study-scroll-container">
      <view class="study-list">
        <view class="study-item" v-for="(item, index) in studyRoomList" :key="index" @click="goToStudyDetail(item.id)">
		  <view class="study-left">
            <img :src="item.cover" class="study-cover"></img>
          </view>
          <view class="study-right">
            <view class="study-title">{{ item.title }}</view>
            <view class="study-desc">
              <view class="people-info">
                <text>最多人数：{{ item.maxPeople }}</text>
                <text>在线人数：{{ item.onlinePeople }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
	<view class="result-section">
	  <view v-if="!searchResults.length && searchKey" class="no-result">未找到匹配的自习室</view>
	  <view v-for="(item, index) in searchResults" :key="index" class="result-item">
		<text class="room-name">{{ item.roomName }}</text>
		<text class="room-location">{{ item.location }}</text>
	  </view>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		currentTab: 'studyView',
		searchKey: '',
		searchResults: [],
      studyRoomList: [
        {
          id: 1,
          cover: '/static/image-room/room1.png',
          title: '阳光自习室',
          maxPeople: 50,
          onlinePeople: 32
        },
        {
          id: 2,
          cover: '/static/image-room/room2.png',
          title: '静音自习室',
          maxPeople: 40,
          onlinePeople: 28
        },
		{
		  id: 3,
		  cover: '/static/image-room/room3.png',
		  title: '岳雅自习室',
		  maxPeople: 50,
		  onlinePeople: 32
		},
		{
		  id: 4,
		  cover: '/static/image-room/room4.png',
		  title: '你好自习室',
		  maxPeople: 50,
		  onlinePeople: 32
		},
      ]
    };
  },
  methods: {
    goToStudyDetail(roomId) {
      uni.navigateTo({
        url: `/pages/room/studyRoom/studyRoom`
      });
	  console.log(`你已经进如${roomId}自习室`)
    },
	goToRankPage() {
	      uni.navigateTo({
	        url: '/pages/person-rank/person-rank' ,// 替换为实际个人排名页面路径
	      });
	    },
	goToStudyView() {
	  // 若当前已是自习室查看页面，可忽略逻辑；若有复杂状态管理再扩展
	  console.log('当前已是自习室查看页面');
	},
	searchStudyRoom(){
		 this.searchResults = this.studyRoomList.filter(item => 
			item.title.includes(this.searchKey)
		  );
	}
  }
};
</script>

<style scoped>
	
/* 页面整体布局 */
.my-study-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 占满视口高度 */
  padding: 20rpx;
  background: linear-gradient(45deg, #ffffff 0%, #68cc6b 99%, #f4f663 100%);
}

/* 按钮切换栏样式 */
.button-switch-bar {
  display: flex;
  margin-bottom: 20rpx;
}
.switch-btn {
  flex: 1;
  text-align: center;
  padding: 15rpx;
  border-radius: 20rpx;
  color: orange;
  margin-right: 20rpx;
  font-size: 30rpx;
  font-weight: bolder;
  box-shadow: 0 2rpx 8rpx rgba(255, 249, 66, 0.7);
  background: linear-gradient(45deg, #ffffff 0%, #68cc6b 99%, #f4f663 100%);
}
.switch-btn:last-child {
  margin-right: 0;
}

.active-btn {
  background-color: #c8ffd8; /* 浅绿色 */
  color: #329655; /* 搭配的文字颜色 */
}


.search-bar {
  display: flex;
  align-items: center;
  background-color: white;
  padding: 15rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(255, 249, 66, 0.7);
  background: linear-gradient(45deg, #ffffff 0%, #d9ffdc 99%, #f6f6f6 100%);
}

.search-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 15rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #666;
}

.search-btn{
	font-size: 28rpx;
	background: linear-gradient(45deg, #dcff9a 0%, #84eb81 99%, #c3d618 100%);
	color: rgb(126, 131, 125);
	border-radius: 10px;
	border: none;
}

/* 滑动容器样式 */
.study-scroll-container {
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 开启垂直滚动 */
}

.study-list {
  display: flex;
  flex-direction: column;
  background: linear-gradient(45deg, #ffffff 0%, #68cc6b 99%, #f4f663 100%);
}

.study-item {
	
  display: flex;
  background-color: #C1E1C1;
  padding: 20rpx;
  border-radius: 15rpx;
  margin-bottom: 20rpx;
  align-items: center;
  box-shadow: 0 2rpx 8rpx rgba(255, 249, 66, 0.7);
  border-radius: 20rpx;
}

.study-left {
  width: 180rpx;
  margin-right: 20rpx;
}

.study-cover {
  width: 100%;
  height: 200rpx;
  border-radius: 10rpx;
}

.study-right {
  flex: 1;
}

.study-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  color: orange;
}

.study-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.4;
}

.people-info {
  display: flex;
  gap: 20rpx;
  margin-top: 40rpx;
}
</style>
